<template>
  <div class="filter-container mb24" v-bind="$attrs">
    <el-row>
      <el-col :span="6">
        <el-button plain :style="{position: 'relative', top: '1px'}" @click="handleSwitch">
          {{ visible?"收起":"筛选" }}<i :class="visible?'el-icon-arrow-up el-icon--right':'el-icon-arrow-down el-icon--right'" />
        </el-button>
      </el-col>
      <el-col :span="18">
        <slot name="actions" />
      </el-col>
    </el-row>
    <slot v-if="visible" name="search" />
  </div>
</template>

<script>
export default {
  name: "FilterSearch",

  data() {
    return {
      visible: false,
    };
  },

  methods: {
    handleSwitch() {
      this.visible = !this.visible;
    },
  },
};
</script>
